<template>
  <view class='sliderHCon'>
    <view class='showMoney'>
      <text class='MoneyValue'>{{showLeft}}</text>
      <text class='MoneyValue'>{{showRight}}</text>
    </view>
    <view class='sliderView'>
      <slider class='left' block-color='black' @change="leftSchange" :min='leftMin' :max='leftMax' :value='leftValue'
              activeColor='#000' backgroundColor='#000' block-size='14' step="0.1"/>
      <slider class='right' block-color='black' @change="rightSchange" :min='rightMin' :max='rightMax'
              :value='rightValue' activeColor='#000' backgroundColor='#000' block-size='14' step="0.1"/>
    </view>
  </view>
</template>

<style>
  .sliderHCon {
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .MoneyValue {
    font-size: 15px;
    text-align: center;
    color: #999;
    margin-top: 7px;
  }

  .showMoney{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .showMoney text{
    margin: 0 35px;
  }

  .sliderView {
    position: relative;
    width: 100%;
    margin: 10px 0;
  }

  .left {
    position: absolute;
    width: 100%;
    margin: 0;
  }

  .right {
    position: absolute;
    width: 100%;
    margin: 0;
  }
</style>

<script>

  export default {
    props: {
      leftMin: {
        default: 1
      },
      leftMax: {
        default: 10
      },
      rightMin: {
        default: 1
      },
      rightMax: {
        default: 10
      },
      leftValue: {
        default: 1
      },
      rightValue: {
        default: 10
      }
    },
    computed: {
      showLeft() {
        return Math.min(this.leftValue, this.rightValue).toFixed(1) + "折"
      },
      showRight() {
        let discount = Math.max(this.leftValue, this.rightValue)
        if (discount == 10){
          return '原价'
        }
        return discount.toFixed(1) + "折"
      }
    },
    methods: {
      leftSchange: function (e) {
        console.log(e)
        var that = this
        var value = e.target.value
        if (value == that.rightValue) {
          if (that.rightValue == this.rightMax) value = value - 0.1
          else value = value + 0.1
        }
        this.leftValue = value
        this.$emit('getTowValue', this.leftValue, this.rightValue)
        console.log('leftSchange', that.leftValue, that.rightValue)
      },
      //右边
      rightSchange: function (e) {
        var that = this
        var value = e.target.value
        if (value == that.leftValue) {
          if (that.leftValue == this.rightMax) value = value - 0.1
          else value = value + 0.1
        }
        this.rightValue = value
        console.log('rightSchange', that.leftValue, that.rightValue)
        this.$emit('getTowValue', this.leftValue, this.rightValue)
      },
    }
  }

</script>

